<template>
	<view>
		<view class="carousel">
			<swiper circular indicator-dots="true" autoplay="true" interval="2000" duration="500">
				<swiper-item>
					<image style="width:100%" src="/static//carousel/1.jpg" mode="scaleToFill"></image>
				</swiper-item>
				<swiper-item>
					<image style="width: 100%;" src="/static//carousel/2.jpg" mode="scaleToFill"></image>
				</swiper-item>
				<swiper-item>
					<image style="width: 100%;" src="/static//carousel/3.jpg" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="classify">
			<input placeholder="搜索垃圾查看对应分类" v-model="search" class="search" @confirm="search_text" />
			<view class="body">
				<image class="pic1" src="../../static/classify/shi.jpg" @click="jump_shi"></image>
				<image class="pic1" src="../../static/classify/gan.jpg" @click="jump_gan"></image>
				<image class="pic1" src="../../static/classify/shou.jpg" @click="jump_shou"></image>
				<image class="pic1" src="../../static/classify/hai.jpg" @click="jump_hai"></image>
			</view>
		</view>

	</view>
</template>

<script>
	const MD5 = require('md5/md5.js')
	export default {
		data() {
			return {
				search: ''
			}
		},
		methods: {
			search_text: function() {
				//获取当前时间戳
				var timestamp = Date.parse(new Date());
				// console.log("当前时间戳为：" + timestamp);
				// 使用加密
				var SecretKey = '0daf3ab76762797eb6729362ad5d19ea'

				console.log(SecretKey + 'timestamp')
				var miyao = MD5.hexMD5(SecretKey + timestamp).toString(); // 使用加密
				console.log("当前秘钥为：" + miyao)

				var mess_name = this.search
				var url =
					'https://aiapi.jd.com/jdai/garbageTextSearch?appkey=a06479cbfd68f27d900a1073dfdc317d&timestamp=' +
					timestamp + '&sign=' + miyao;

				console.log(url)
				var that = this
				uni.request({
					url: url,
					method: "POST",
					header: {
						// 'Content-Type': 'application/JSON',
					},
					data: {
						cityId: 310000,
						text: mess_name
					},
					success: function(res) {
						console.log(res)
						if (res.data.result.status == 4108) {
							uni.showToast({
								title: '查找失败。。',
								icon: 'none'
							})
						} else {
							console.log(res.data.result.garbage_info[0])
							that.garbage_info = res.data.result.garbage_info[0]
							uni.setStorage({
								key: 'garbage_info', // 命名
								data: that.garbage_info //内容
							});

							var pic_path =
								'http://www.cdstm.cn/frontier/hjkx/201907/W020190715405701938840.jpg'

							uni.navigateTo({
								url: '../result/result?pic_path=' + pic_path
							});
						}
					},
				});
			},

			jump_shi: function() {
				uni.navigateTo({
					url: '../classify/shi'
				});

			},
			jump_gan: function() {
				uni.navigateTo({
					url: '../classify/gan'
				});
			},
			jump_shou: function() {
				uni.navigateTo({
					url: '../classify/shou'
				});
			},
			jump_hai: function() {
				uni.navigateTo({
					url: '../classify/hai'
				});
			}
		}
	}
</script>

<style>
	.carousel swiper {
		width: 750rpx;
		height: 380rpx;
	}

	.carousel image {
		width: 100%;
		height: 100%;
	}

	.search {
		/* border: 1px solid #70bcf6; */
		background-color: #F1F1F1;
		margin-left: 55upx;
		height: 80upx;
		width: 620upx;
		border-radius: 50upx;
		text-align: center;
		margin-top: 30upx;
		font-size: 33upx;
	}

	.head {
		height: 400upx;
		width: 90%;
		border-radius: 40upx;
		margin-left: 40upx;
	}

	.body {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
	}

	.pic1 {
		height: 270upx;
		width: 270upx;
		margin-left: 65upx;
		margin-top: 30upx;
		border-radius: 30upx;

	}
</style>